<template>
	<view class="da-dropdown" ref="dropdownRef" :class="{'is-fixed': fixedTop,'show-time':showTime}"
		:style="dropdownStyle">
		<view class="is-overlay" v-if="isShow" :style="{top:`${marginTop}px`}" @click="handlePopupMask">

		</view>
		<!-- 弹出 -->
		<view class="da-dropdown-content" v-show="isShow" :class="{'is-show': isShow,'is-visible': isVisible,}">
			<view class="da-dropdown-content-popup" :class="isShow ? 'is-show' : 'is-not-show'">
				<view class="da-dropdown-popup-box">
					<slot name="slot1"></slot>
				</view>
			</view>
			<view class="da-dropdown-content-mask" v-if="fixedTop" @tap="handlePopupMask"
				@touchmove.stop.prevent="handleMove" />
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			/**
			 * 导航菜单数据
			 */
			dropdownMenu: {
				type: Array,
				default: () => [],
			},
			/**
			 * 激活颜色
			 */
			themeColor: {
				type: String,
				default: '#007aff',
			},
			/**
			 * 背景颜色，当固定在顶部时，此为必填
			 */
			bgColor: {
				type: String,
				default: '#ffffff',
			},
			/**
			 * 是否固定在顶部
			 */
			fixedTop: {
				type: Boolean,
				default: false,
			},
			/**
			 * 固定在头部时的位置，单位px
			 * 如果页面定义了 "navigationStyle": "custom" ，因此固定头部时需要额外获取状态栏高度，以免被异形屏头部覆盖
			 */
			fixedTopValue: {
				type: Number,
				default: 0,
			},
			/**
			 * 弹窗过渡时间
			 */
			duration: {
				type: [Number, String],
				default: 300,
			},
			/**
			 * 是否点击蒙层关闭 默认不关闭
			 */
			isCloseMask: {
				type: Boolean,
				default: false,
			},
			showTime: {
				type: Boolean,
				default: false,
			},
			cusTop:{
				type: Number,
				default: 0,
			}

		},
		data() {
			return {
				isVisible: false,
				isShow: false,
				marginTop: 0
			}
		},
		computed: {
			/**
			 * 主题样式
			 */
			dropdownStyle() {
				return `
        --dropdown-theme-color: ${this.themeColor};
        --dropdown-background-color: ${this.bgColor};
        --dropdown-popup-duration: ${this.duration / 1000}}s;
        --dropdown-fixed-top: ${this.fixedTopValue || 0}}px;
      `
			},
		},
		mounted() {
			this.$nextTick(() => {
				console.log("dropdownRef", this.$refs.dropdownRef)
			})
			this.getElementTop()
		},
		methods: {
			getElementTop() {
				var query = uni.createSelectorQuery().in(this);
				query.select('.da-dropdown').boundingClientRect(data => {
					if (data) {
						// data.top就是元素的距离页面顶部的距离
						console.log('距离页面顶部的距离:', data.top);
						let topIconDistance = 44
						// #ifdef APP || MP-WEIXIN
						uni.getSystemInfo({
							success: (res) => {
								// 获取手机顶部状态栏的高度
								const statusBarHeight = res.statusBarHeight || 0;

								// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
								// const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
								// const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top -
								// 	statusBarHeight) * 2;

								// 计算顶部图标距离
								topIconDistance = statusBarHeight //+ navBarHeight;
								this.marginTop = data.top + topIconDistance
								// 打印顶部图标距离
								console.log('顶部图标距离:', topIconDistance);
							},
							fail: (err) => {
								console.error('获取系统信息失败:', err);
							},
						});
						// #endif
						// #ifdef H5
						this.marginTop = data.top + topIconDistance
						// #endif
						// #ifdef MP-WEIXIN
						this.marginTop += this.cusTop
						// #endif
						console.log('marginTop:', this.marginTop);
					}
				}).exec();
			},
			/**
			 * 打开弹窗
			 * @param index 当前激活索引
			 */
			openMenuItemPopup() {
				this.isShow = true
				this.isVisible = true
				this.$emit('open')
			},
			/**
			 * 关闭弹窗
			 */
			closeMenuPopup() {
				this.isShow = false
				// 延迟移除下拉弹窗
				setTimeout(() => {
					this.isVisible = false
				}, this.duration)

				this.$forceUpdate()
				this.$emit('close')
			},
			/**
			 * 点击蒙层
			 */
			handlePopupMask() {
				if (!this.isCloseMask) return
				this.closeMenuPopup()
			},
			/**
			 * 清理滚动
			 */
			handleMove() {
				return false
			},
		},
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'da-dropdown-iconfont';
		/* Project id  */
		src: url('data:application/octet-stream;base64,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') format('truetype');
	}

	.is-overlay {
		position: fixed;
		z-index: 900;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		opacity: 1;
		transition: opacity var(--dropdown-popup-duration, 0.3s) linear;
	}

	.da-dropdown {
		--dropdown-menu-height: 80rpx;
		--dropdown-popup-duration: 0.3s;

		position: relative;
		z-index: 888;
		width: 100%;
		line-height: 1;

		&-menu {
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			height: var(--dropdown-menu-height);
			background: var(--dropdown-background-color, #fff);
			box-shadow: 0 1rpx 0 0 #bbb;

			&-item {
				display: flex;
				flex-grow: 1;
				align-items: center;
				justify-content: center;
				height: 100%;

				&:hover {
					background: #fafafa;
				}

				&.is-hidden {
					display: none;
				}

			}
		}


		&-content {
			position: absolute;
			top: 0;
			// top: var(--dropdown-menu-height);
			left: 0;
			z-index: -1;
			box-sizing: border-box;
			width: 100%;
			overflow: hidden;
			visibility: hidden;
			// box-shadow: 0 -1rpx 0 0 #bbb;
			margin-top: -2rpx;
			opacity: 0;
			transition: all var(--dropdown-popup-duration, 0.3s) linear;

			&.is-show {
				z-index: 901;
				opacity: 1;
			}

			&.is-not-show {
				/* opacity: 0;
				z-index: 0; */
			}

			&.is-visible {
				visibility: visible;
				// animation: CustomBS var(--dropdown-popup-duration) linear var(--dropdown-popup-duration) forwards;
			}

			&-mask {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				z-index: 9;
				width: 100%;
				background: rgba(0, 0, 0, 0.3);
			}

			&-popup {
				position: relative;
				z-index: 10;
				max-height: 100%;
				overflow: auto;
				transition: transform var(--dropdown-popup-duration) linear;
				transform: translateY(-100%);

				&.is-show {
					transform: translateY(0);
				}
			}
		}

		&-popup-box {
			width: 100%;
			height: 100%;
			overflow: hidden;
			font-size: 28rpx;
			line-height: 1;
			background: var(--dropdown-background-color, #fff);
			transition: border-radius var(--dropdown-popup-duration) linear;
		}


		/* 固定至顶 */
		&.is-fixed {
			z-index: 980;

			.da-dropdown {

				&-menu {
					position: fixed;
					top: calc(var(--window-top, 0px) + var(--dropdown-fixed-top, 0px));
					right: 0;
					left: 0;
					max-width: 1190px;
					margin: auto;
				}

				&-content {
					position: fixed;
					top: calc(var(--window-top, 0px) + var(--dropdown-fixed-top, 0px) + var(--dropdown-menu-height, 0px));
					right: 0;
					bottom: 0;
					left: 0;
					height: 100%;
					box-shadow: none;
				}
			}
		}
	}

	.show-time {
		.da-dropdown-popup-box {
			min-height: 841rpx;
		}
	}

	@keyframes CustomBS {
		0% {
			box-shadow: 0 -1rpx 0 0 #bbb;
		}

		100% {
			box-shadow: 0 -1rpx 0 0 #bbb, 0 20rpx 20rpx -10rpx rgba(0, 0, 0, 0.1);
		}
	}
</style>